<template>
	<div class="layout-form fixed-layout add-case">
		<div class="fixed-section">
			<div class="title"></div>
			<button @click="submitForm">保存</button>
			<button class="btn-cancel" @click="goBack">返回</button>
		</div>
		<div class="section-form">
			<el-form :ref="clueDetail.ref" :inline="true" :model="clueDetail">
				<div class="section">
					<div class="panel-title">
						<span class="title">客户信息</span>
						<div class="title-right">
							<a class="btn" @click="addCustomer">新增</a>
						</div>
					</div>
					<div class="panel-content">
						<template v-for="i in customerCount">
							<div class="panel-list">
								<div class="pos-left">
									<span class="count">{{i}}</span>
								</div>
								<div class="pos-right" v-if="i>1">
									<i class="icon i-close" @click="removeCustomer((i-1))"></i>
								</div>
								<el-form-item label="借款合同" prop="reflectName">
									<el-input v-model="clueDetail.customer[(i-1)].reflectName" placeholder="请输入借款合同"></el-input>
								</el-form-item>
								<el-form-item label="信审合同" prop="reflectSex">
									<el-input v-model="clueDetail.customer[(i-1)].reflectSex" placeholder="请输入信审合同"></el-input>
								</el-form-item>
								<el-form-item label="客户姓名" prop="reflectName">
									<el-input v-model="clueDetail.customer[(i-1)].reflectName" placeholder="请输入客户姓名"></el-input>
								</el-form-item>
								<el-form-item label="客户电话" prop="reflectPhone">
									<el-input v-model="clueDetail.customer[(i-1)].reflectPhone" placeholder="请输入客户电话"></el-input>
								</el-form-item>
								<el-form-item label="客户身份证号" prop="reflectIdentity">
									<el-input v-model="clueDetail.customer[(i-1)].reflectIdentity" placeholder="请输入客户身份证号"></el-input>
								</el-form-item>
								<el-form-item label="授信时间" prop="creditDate">
									<el-date-picker v-model="clueDetail.customer[(i-1)].creditDate" value-format="yyyy-MM-dd" type="date" placeholder="选择授信时间">
									</el-date-picker>
								</el-form-item>
								<el-form-item label="授信金额" prop="creditMoney">
									<el-input v-model="clueDetail.customer[(i-1)].creditMoney" placeholder="请输入授信金额"></el-input>
								</el-form-item>
								<el-form-item label="借款时间" prop="borrowDate">
									<el-date-picker v-model="clueDetail.customer[(i-1)].borrowDate" value-format="yyyy-MM-dd" type="date" placeholder="选择借款时间">
									</el-date-picker>
								</el-form-item>
								<el-form-item label="借款金额" prop="borrowMoney">
									<el-input v-model="clueDetail.customer[(i-1)].borrowMoney" placeholder="请输入借款金额"></el-input>
								</el-form-item>
								<el-form-item label="客户经理是否变动" prop="managerChange">
									<el-select v-model="clueDetail.customer[(i-1)].managerChange" placeholder="请选择客户经理是否变动">
										<el-option label="是" value="1"></el-option>
										<el-option label="否" value="0"></el-option>
										<el-option label="无法确定" value="2"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="当前客户经理" prop="customerManager">
									<el-input v-model="clueDetail.customer[(i-1)].customerManager" placeholder="请输入当前客户经理"></el-input>
								</el-form-item>
								<el-form-item label="当前客户经理电话" prop="customerManagerPhone">
									<el-input v-model="clueDetail.customer[(i-1)].customerManagerPhone" placeholder="请输入当前客户经理电话"></el-input>
								</el-form-item>
								<el-form-item label="历史客户经理" prop="historycustomerManager">
									<el-input v-model="clueDetail.customer[(i-1)].historycustomerManager" placeholder="多名请用 “,” 隔开"></el-input>
								</el-form-item>
								<el-form-item label="所属营业部" prop="salesDeptCode">
									<el-select v-model="clueDetail.customer[(i-1)].salesDeptCode" placeholder="请搜索所属营业部" filterable remote :remote-method="searchSalesDept"
									 :loading="salesDeptData.loading" @change="salesDeptChange">
										<el-option v-for="item in salesDeptData.list" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="商户id" prop="reflectId1">
									<el-input v-model="clueDetail.customer[(i-1)].reflectId1" placeholder="请输入商户id"></el-input>
								</el-form-item>
								<el-form-item label="商户名称" prop="reflectName1">
									<el-input v-model="clueDetail.customer[(i-1)].reflectName1" placeholder="请输入商户名称"></el-input>
								</el-form-item>
							</div>
						</template>
					</div>
				</div>
				<div class="section">
					<div class="panel-title">
						<span class="title">举报人信息</span>
					</div>
					<div class="panel-content">
						<el-form-item label="举报人姓名" prop="reflectName">
							<el-input v-model="clueDetail.clueInformer.reflectName" placeholder="请输入举报人姓名"></el-input>
						</el-form-item>
						<el-form-item label="举报人电话" prop="reflectPhone">
							<el-input v-model="clueDetail.clueInformer.reflectPhone" placeholder="请输入举报人电话"></el-input>
						</el-form-item>
						<el-form-item class="form-block" label="备注" prop="remark">
							<el-input type="textarea" v-model="clueDetail.clueInformer.remark" placeholder="请输入备注"></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="section">
					<div class="panel-title">
						<span class="title">被举报人信息</span>
					</div>
					<div class="panel-content table-tool">
						<el-table :data="clueDetail.clueBeReported" border style="width: 100%">
							<el-table-column fixed="right" label="操作" width="60">
								<template slot-scope="scope">
									<a class="delete" @click="deleteBeReported(scope.$index)">删除</a>
								</template>
							</el-table-column>
							<el-table-column label="序号" width="50">
								<template slot-scope="scope">
									<div class="count">{{(scope.$index+1)}}</div>
								</template>
							</el-table-column>
							<el-table-column label="被举报人姓名">
								<template slot-scope="scope">
									<el-input v-model="scope.row.beReportedName" placeholder="请输入..."></el-input>
								</template>
							</el-table-column>
							<el-table-column label="被举报人手机">
								<template slot-scope="scope">
									<el-input v-model="scope.row.beReportedPhone" placeholder="请输入..."></el-input>
								</template>
							</el-table-column>
							<el-table-column label="被举报人身份证">
								<template slot-scope="scope">
									<el-input v-model="scope.row.beReportedIdentity" placeholder="请输入..."></el-input>
								</template>
							</el-table-column>
							<el-table-column label="被举报人所属公司">
								<template slot-scope="scope">
									<el-select v-model="scope.row.beReportedOrg" placeholder="请搜索..." filterable remote :remote-method="searchBusinessMethod"
									 :loading="search.loading">
										<el-option v-for="item in search.list" :key="item.code" :label="item.name" :value="item.name"></el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="被举报人所属部门">
								<template slot-scope="scope">
									<el-select v-model="scope.row.beReportedDept" placeholder="请搜索..." filterable remote :remote-method="searchBusinessMethod"
									 :loading="search.loading">
										<el-option v-for="item in search.list" :key="item.code" :label="item.name" :value="item.name"></el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="被举报人所属营业部">
								<template slot-scope="scope">
									<el-select v-model="scope.row.beReportedBusiness" placeholder="请搜索..." filterable remote :remote-method="searchSalesDept"
									 :loading="salesDeptData.loading">
										<el-option v-for="item in salesDeptData.list" :key="item.id" :label="item.deptName" :value="item.deptName"></el-option>
									</el-select>
								</template>
							</el-table-column>
						</el-table>
						<div class="table-footer">
							<a class="add" @click="addBeReported">+ 新增一条</a>
						</div>
					</div>
				</div>
				<div class="section">
					<div class="panel-title">
						<span class="title">其它信息</span>
					</div>
					<div class="panel-content">
						<el-form-item label="来源渠道" prop="source" class="is-required">
							<el-select v-model="clueDetail.clueInfo.source" placeholder="请选择来源渠道">
								<el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="产品类型" prop="product">
							<el-select v-model="clueDetail.clueInfo.product" placeholder="请选择产品类型">
								<el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="线索获取日期" prop="clueDate" class="is-required">
							<el-date-picker v-model="clueDetail.clueInfo.clueDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item class="form-block is-required" label="反馈详情" prop="reflectContent">
							<el-input type="textarea" v-model="clueDetail.clueInfo.reflectContent" placeholder="请输入反馈详情"></el-input>
						</el-form-item>
						<el-form-item class="form-block" label="备注" prop="remark">
							<el-input type="textarea" v-model="clueDetail.clueInfo.remark" placeholder="请输入备注"></el-input>
						</el-form-item>
						<el-form-item class="form-block" label="举证资料">
							<div class="section-tool">
								<a class="btn" @click="showEvidenceLayer">上传</a>
							</div>
							<el-table :data="evidenceData.list" border style="width: 100%">
								<el-table-column fixed="right" label="操作" width="108">
									<template slot-scope="scope">
										<!-- <a v-if="scope.row.fileUrl" :href="scope.row.fileUrl" :download="scope.row.fileName">下载</a> -->
										<a @click="deleteEvidence(scope.$index)">删除</a>
									</template>
								</el-table-column>
								<el-table-column label="序号" width="50">
									<template slot-scope="scope">
										<div class="count">{{(scope.$index+1)}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="cdate" label="上传时间" width="155"></el-table-column>
								<el-table-column prop="fileName" label="文件名称"></el-table-column>
								<el-table-column prop="remark" label="备注"></el-table-column>
							</el-table>
						</el-form-item>
					</div>
				</div>
			</el-form>
			<!-- 举证资料 -->
			<layer :data="evidenceData.layer" @on-ok="saveEvidence">
				<el-form :model="evidenceData.form">
					<el-form-item label="文件名称" prop="fileName" class="is-required">
						<el-input v-model="evidenceData.form.fileName" placeholder="请输入文件名称"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" v-model="evidenceData.form.remark" placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-form>
				<div class="el-form-item form-upload">
					<label class="el-form-item__label"></label>
					<div class="el-form-item__content">
						<el-upload class="upload-demo" :action="uploadData.url" :before-upload="beforeUploadFile" :on-success="uploadFileSuccess"
						 :on-remove="removeFileList" :file-list="uploadData.fileList" :limit="uploadData.limit" :on-exceed="exceedLimit">
							<button class="btn-upload">
								<i class="icon i-upload"></i>
								<span>上传文件</span>
							</button>
						</el-upload>
					</div>
				</div>
			</layer>
		</div>
	</div>
</template>
<script>
	import addClue from './add'
	export default {
		name: 'addClue',
		mixins: [addClue]
	}
</script>